import React, { forwardRef, useMemo } from 'react';

import './index.scss';


export interface StationRightProps {
  /**
   * 组件标题
   */
  title?: string;

  /**
   * 英文标题
   */
  englishTitle?: string;

  /**
   * 总计面积
   */
  totalArea?: number;

  /**
   * 面积单位
   */
  areaUnit?: string;

  /**
   * 图表宽度
   */
  chartWidth?: number | string;

  /**
   * 图表高度
   */
  chartHeight?: number | string;

  /**
   * Y轴最大值
   */
  yAxisMax?: number;

  /**
   * 柱条宽度
   */
  barWidth?: string | number;

  /**
   * 图表点击事件
   */
  onChartClick?: (params: any) => void;

  /**
   * 点击事件
   */
  onClick?: () => void;

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;

  // 低代码平台相关属性
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const StationRight = forwardRef<HTMLDivElement, StationRightProps>((props, ref) => {
  const {
    title = '站体面积汇总',
    englishTitle = 'Station area summary',
    chartWidth = 460,
    chartHeight = 220,
    yAxisMax = 40000,
    barWidth = 20,
    topData = [
      { title: '消防重点区域', value: '17788' },
      { title: '服务点位', value: '17788' },
      { title: '易积水点', value: '17788' },
      { title: '平安哨', value: '17788' },
      { title: '消杀点', value: '17788' },
      { title: '易滑倒点位', value: '17788' },
      { title: '易受风点', value: '17788' },
      { title: '地下出入口', value: '17788' },
    ],
    lajiData = [
      { icon: 'http://localhost:8085/static/images/sheshihuanjing/laji-icon-one.png',  title: '垃圾量显示', value: '48,430' },
      { icon: 'http://localhost:8085/static/images/sheshihuanjing/laji-icon-two.png',  title: '清运时间', value: '14:40' },
      { icon: 'http://localhost:8085/static/images/sheshihuanjing/laji-icon-three.png',  title: '集置点所属单位', value: '地址地址' },
      { icon: 'http://localhost:8085/static/images/sheshihuanjing/laji-icon-four.png',  title: '监控-漫溢预警', value: 'XXXX' },
    ],
    onChartClick,
    onClick,
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;
  const componentStyle: React.CSSProperties = {
    width: '500px',
    height: '1080px',
    ...style
  } as React.CSSProperties;
  const handleClick = () => {
    onClick?.();
  };

  const handleChartClick = (params: any) => {
    onChartClick?.(params);
  };

  const componentClassName = [
    'hzdz-station-right',
    className
  ].filter(Boolean).join(' ');


  return (
    <div
      ref={ref}
      className={componentClassName}
      style={componentStyle}
      onClick={handleClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      <div className="top-wrap">
        <div className="title-wrap" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/title-bg.png)'}}>
          <div className="title-str">
            <div className="title">
              <div>点位汇总</div>
              <div className="sen-title">点位汇总</div>
            </div>
            <div className="subtitle">Point summary</div>
          </div>
        </div>
        <div className="content-wrap">
          <div className="top-area">
            {topData.map((middle, index) => (
              <div className="top-item">
                <div className="top-title">{middle.title}</div>
                <div className="value">{middle.value}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="bottom-line" />
      </div>
      <div className="bottom-wrap">
        <div className="title-wrap" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/title-bg.png)'}}>
          <div className="title-str">
            <div className="title">
              <div>垃圾管理</div>
              <div className="sen-title">垃圾管理</div>
            </div>
            <div className="subtitle">Waste Management</div>
          </div>
        </div>
        <div className="content-wrap">
          <div className="laji-data-area">
            {lajiData.map((laji, index) => (
              <div className="laji-data-item">
                <div className="item-icon" style={{backgroundImage: `url(${laji.icon})`}} />
                <div className="item-right">
                  <div  className="value">{laji.value}</div>
                  <div  className="title">{laji.title}</div>
                </div>
                {index === 0 && (
                  <div className="edit-icon" style={{backgroundImage: `url(http://localhost:8085/static/images/sheshihuanjing/title-bianji-icon.png)`}}></div>
                )}
              </div>
            ))}
          </div>
          <div className="item-head">
            <div className="head-round" style={{backgroundImage: 'url(http://localhost:8085/static/images/sheshihuanjing/point-icon-blue.png)'}} />
            <div className="head-title">视频监控</div>
            <div className="head-line" />
            <div className="head-right" style={{backgroundImage: 'url(http://localhost:8085/static/images/sheshihuanjing/left-icon-blue.png)'}} />
          </div>
          <div className="video-area">
            <div className="video-item" style={{backgroundImage: 'url(http://localhost:8085/static/images/sheshihuanjing/video-border.png)'}}>
              <video className="video-content" controls autoPlay>
                <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4"/>
              </video>
              <div className="video-top">
                <div>垃圾房</div>
                <div className="magnify-icon" style={{backgroundImage: 'url(http://localhost:8085/static/images/sheshihuanjing/magnify-icon.png)'}} />
              </div>
            </div>
            <div className="video-item" style={{backgroundImage: 'url(http://localhost:8085/static/images/sheshihuanjing/video-border.png)'}}>
              <video className="video-content" controls autoPlay>
                <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4"/>
              </video>
              <div className="video-top">
                <div>垃圾房</div>
                <div className="magnify-icon" style={{backgroundImage: 'url(http://localhost:8085/static/images/sheshihuanjing/magnify-icon.png)'}} />
              </div>
            </div>
          </div>
        </div>
        <div className="bottom-line" />
      </div>
    </div>
  );
});

StationRight.displayName = 'StationRight';

export default StationRight;
